<template>
  <div class="student-list-container">
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">{{ userStore.isTeacher ? '我的学生' : '学生管理' }}</h1>
          <div class="page-subtitle">管理和查看学生信息</div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showAddDialog">
            <el-icon><Plus /></el-icon>
            新增学生
          </el-button>
          <el-button @click="showImportDialog">
            <el-icon><Upload /></el-icon>
            批量导入
          </el-button>
          <el-dropdown @command="handleBatchAction" :disabled="selectedStudents.length === 0">
            <el-button :disabled="selectedStudents.length === 0">
              <el-icon><Operation /></el-icon>
              批量操作 ({{ selectedStudents.length }})
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="delete" :disabled="selectedStudents.length === 0">
                  <el-icon><Delete /></el-icon>
                  批量删除
                </el-dropdown-item>
                <el-dropdown-item command="activate" :disabled="selectedStudents.length === 0">
                  <el-icon><Check /></el-icon>
                  批量激活
                </el-dropdown-item>
                <el-dropdown-item command="suspend" :disabled="selectedStudents.length === 0">
                  <el-icon><Close /></el-icon>
                  批量停用
                </el-dropdown-item>
                <el-dropdown-item command="graduate" :disabled="selectedStudents.length === 0">
                  <el-icon><Trophy /></el-icon>
                  批量毕业
                </el-dropdown-item>
                <el-dropdown-item command="assignTeacher" :disabled="selectedStudents.length === 0">
                  <el-icon><User /></el-icon>
                  批量分配老师
                </el-dropdown-item>
                <el-dropdown-item command="export" :disabled="selectedStudents.length === 0">
                  <el-icon><Download /></el-icon>
                  导出选中
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="page-content">

      <!-- 搜索筛选 -->
      <div class="search-section">
        <el-card class="search-card" shadow="never">
          <el-form :model="searchForm" inline class="search-form">
            <el-form-item label="关键词">
              <el-input
                v-model="searchForm.search"
                placeholder="学号/姓名/手机号"
                clearable
                @keyup.enter="handleSearch"
                class="search-input"
              />
            </el-form-item>
            <el-form-item label="学校">
              <el-select v-model="searchForm.school_id" placeholder="选择学校" clearable class="search-select">
                <el-option
                  v-for="school in schoolList"
                  :key="school?.id || school"
                  :label="school?.name || ''"
                  :value="school?.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="专业">
              <el-select v-model="searchForm.major_id" placeholder="选择专业" clearable class="search-select">
                <el-option
                  v-for="major in majorList"
                  :key="major?.id || major"
                  :label="major?.name || ''"
                  :value="major?.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 学生列表 -->
      <div class="table-section">
        <el-card class="table-card" shadow="never">
          <!-- 选中状态栏 -->
          <div v-if="selectedStudents.length > 0" class="selection-bar">
            <div class="selection-info">
              <el-icon><InfoFilled /></el-icon>
              已选中 <strong>{{ selectedStudents.length }}</strong> 名学生
            </div>
            <div class="selection-actions">
              <el-button size="small" @click="selectedStudents = []">
                <el-icon><Close /></el-icon>
                清空选择
              </el-button>
            </div>
          </div>

          <div class="table-container">
            <el-table
              :data="studentList"
              v-loading="loading"
              stripe
              class="student-table"
              :height="tableHeight"
              :header-cell-style="{ background: '#f8f9fa', color: '#495057', fontWeight: '600' }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column prop="student_id" label="学号" min-width="120" show-overflow-tooltip />
              <el-table-column prop="name" label="姓名" min-width="100" show-overflow-tooltip />
              <el-table-column prop="gender" label="性别" width="80" align="center">
                <template #default="{ row }">
                  <el-tag :type="row.gender === 'M' ? 'primary' : 'success'" size="small">
                    {{ row.gender === 'M' ? '男' : '女' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="手机号" min-width="130" show-overflow-tooltip />
              <el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
              <el-table-column label="年级" min-width="120" show-overflow-tooltip>
                <template #default="{ row }">
                  {{ row.grade_info?.name || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="指导老师" min-width="120" show-overflow-tooltip>
                <template #default="{ row }">
                  {{ row.advisor_info?.first_name || row.advisor_info?.username || '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="学籍状态" width="120" align="center">
                <template #default="{ row }">
                  <el-tag :type="getStatusTagType(row.status)" size="small">
                    {{ getStatusText(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" fixed="right" align="center">
                <template #default="{ row }">
                  <el-button size="small" type="primary" link @click="showEditDialog(row)">
                    <el-icon><Edit /></el-icon>
                    编辑
                  </el-button>
                  <el-button size="small" type="danger" link @click="handleDelete(row)">
                    <el-icon><Delete /></el-icon>
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页 -->
          <div class="pagination-wrapper">
            <el-pagination
              v-model:current-page="pagination.page"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="fetchStudentList"
              @current-change="fetchStudentList"
              background
            />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 新增/编辑学生对话框 -->
    <el-dialog
      v-model="studentDialogVisible"
      :title="isEdit ? '编辑学生' : '新增学生'"
      width="1000px"
      @close="resetStudentForm"
      class="student-dialog"
    >
      <el-form
        ref="studentFormRef"
        :model="studentForm"
        :rules="studentRules"
        label-width="120px"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><User /></el-icon>
            基本信息
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="studentForm.name" placeholder="请输入学生姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="isEdit">
              <el-form-item label="学号">
                <el-input v-model="studentForm.student_id" readonly placeholder="系统自动生成" />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="!isEdit">
              <el-form-item label="密码" prop="password">
                <el-input v-model="studentForm.password" type="password" placeholder="默认123456" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="studentForm.gender">
                  <el-radio label="M">男</el-radio>
                  <el-radio label="F">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="出生日期" prop="birth_date">
                <el-date-picker
                  v-model="studentForm.birth_date"
                  type="date"
                  placeholder="选择出生日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="studentForm.phone" placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="studentForm.email" placeholder="请输入邮箱地址" />
              </el-form-item>
            </el-col>
          </el-row>


        </div>

        <!-- 校区信息 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><School /></el-icon>
            校区信息
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="校区" prop="school">
                <el-select
                  v-model="studentForm.school"
                  placeholder="请选择校区"
                  style="width: 100%"
                  :loading="dataLoading"
                  filterable
                  :disabled="schoolList.length === 0"
                >
                  <el-option
                    v-for="school in schoolList"
                    :key="school?.id || school"
                    :label="school?.name || ''"
                    :value="school?.id"
                  />
                  <template v-if="schoolList.length === 0" #empty>
                    <div style="padding: 10px; text-align: center; color: #999;">
                      {{ dataLoading ? '加载中...' : '暂无校区数据' }}
                    </div>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业" prop="major">
                <el-select
                  v-model="studentForm.major"
                  placeholder="请选择专业"
                  style="width: 100%"
                  :loading="dataLoading"
                  filterable
                  :disabled="majorList.length === 0"
                >
                  <el-option
                    v-for="major in majorList"
                    :key="major?.id || major"
                    :label="major?.name || ''"
                    :value="major?.id"
                  />
                  <template v-if="majorList.length === 0" #empty>
                    <div style="padding: 10px; text-align: center; color: #999;">
                      {{ dataLoading ? '加载中...' : '暂无专业数据' }}
                    </div>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年级" prop="grade">
                <el-select
                  v-model="studentForm.grade"
                  placeholder="请选择年级"
                  style="width: 100%"
                  :loading="dataLoading"
                  filterable
                  :disabled="gradeList.length === 0"
                >
                  <el-option
                    v-for="grade in gradeList"
                    :key="grade?.id || grade"
                    :label="grade?.name || ''"
                    :value="grade?.id"
                  />
                  <template v-if="gradeList.length === 0" #empty>
                    <div style="padding: 10px; text-align: center; color: #999;">
                      {{ dataLoading ? '加载中...' : '暂无年级数据' }}
                    </div>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="入学日期" prop="enrollment_date">
                <el-date-picker
                  v-model="studentForm.enrollment_date"
                  type="month"
                  placeholder="选择入学年月"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="毕业日期" prop="graduation_date">
                <el-date-picker
                  v-model="studentForm.graduation_date"
                  type="month"
                  placeholder="选择毕业年月"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="指导老师" prop="advisor">
                <el-select
                  v-model="studentForm.advisor"
                  placeholder="选择指导老师"
                  clearable
                  style="width: 100%"
                  :loading="dataLoading"
                  filterable
                >
                  <el-option
                    v-for="teacher in teacherList"
                    :key="teacher?.id || teacher"
                    :label="`${teacher?.first_name || ''}${teacher?.last_name || ''} (${teacher?.username || ''})`"
                    :value="teacher?.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 其他信息 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><Document /></el-icon>
            其他信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="家庭地址" prop="address">
                <el-input v-model="studentForm.address" type="textarea" :rows="2" placeholder="请输入家庭地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="notes">
                <el-input v-model="studentForm.notes" type="textarea" :rows="2" placeholder="请输入备注信息" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <template #footer>
        <el-button @click="studentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          {{ isEdit ? '更新' : '创建' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 批量导入对话框 -->
    <el-dialog
      v-model="importDialogVisible"
      title="批量导入学生"
      width="1000px"
      class="import-dialog"
    >
      <div class="import-content">
        <!-- 左侧：模板下载和说明 -->
        <div class="import-left">
          <div class="template-section">
            <h3>
              <el-icon><Download /></el-icon>
              模板下载
            </h3>
            <div class="template-actions">
              <el-button type="primary" @click="downloadTemplate">
                <el-icon><Download /></el-icon>
                下载导入模板
              </el-button>
            </div>
          </div>

          <div class="template-guide">
            <h3>
              <el-icon><InfoFilled /></el-icon>
              导入说明
            </h3>
            <div class="guide-content">
              <h4>字段说明：</h4>
              <ul class="field-list">
                <li><strong>姓名</strong>：必填，学生真实姓名</li>
                <li><strong>密码</strong>：默认123456，可自定义</li>
                <li><strong>性别</strong>：男/女，默认为男</li>
                <li><strong>出生日期</strong>：格式YYYY-MM-DD，可为空</li>
                <li><strong>手机号</strong>：必填，11位手机号码</li>
                <li><strong>邮箱</strong>：必填，有效邮箱地址</li>
                <li><strong>校区</strong>：必选，从下拉列表选择</li>
                <li><strong>专业</strong>：必填，从下拉列表选择</li>
                <li><strong>年级</strong>：必选，从下拉列表选择</li>
                <li><strong>入学日期</strong>：格式YYYY-MM</li>
                <li><strong>毕业日期</strong>：格式YYYY-MM</li>
                <li><strong>指导老师</strong>：可为空，从下拉列表选择</li>
                <li><strong>家庭地址</strong>：可为空</li>
                <li><strong>备注</strong>：可为空</li>
              </ul>

              <h4>注意事项：</h4>
              <ul class="notice-list">
                <li>请严格按照模板格式填写数据</li>
                <li>必填字段不能为空</li>
                <li>日期格式必须正确</li>
                <li>手机号和邮箱不能重复</li>
                <li>文件大小不超过10MB</li>
                <li>支持xlsx、xls、csv格式</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 右侧：文件上传和导入 -->
        <div class="import-right">
          <div class="upload-section">
            <h3>
              <el-icon><Upload /></el-icon>
              文件上传
            </h3>
            <el-upload
              ref="uploadRef"
              :auto-upload="false"
              :on-change="handleFileChange"
              :before-remove="handleFileRemove"
              accept=".xlsx,.xls,.csv"
              drag
              class="upload-area"
            >
              <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  支持 xlsx/xls/csv 格式，文件大小不超过 10MB
                </div>
              </template>
            </el-upload>

            <!-- 文件信息 -->
            <div v-if="uploadFile" class="file-info">
              <div class="file-item">
                <el-icon><Document /></el-icon>
                <span class="file-name">{{ uploadFile.name }}</span>
                <span class="file-size">({{ formatFileSize(uploadFile.size) }})</span>
                <el-button type="danger" text @click="removeFile">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
            </div>

            <!-- 导入进度 -->
            <div v-if="importing" class="import-progress">
              <div class="progress-info">
                <span>正在导入学生数据...</span>
                <span>{{ importProgress.current }}/{{ importProgress.total }}</span>
              </div>
              <el-progress
                :percentage="importProgress.percentage"
                :stroke-width="8"
                :show-text="false"
              />
              <div class="progress-detail">
                <span class="success-count">成功：{{ importProgress.success }}</span>
                <span class="error-count">失败：{{ importProgress.error }}</span>
              </div>
            </div>

            <!-- 导入结果 -->
            <div v-if="importResult" class="import-result">
              <el-alert
                :type="importResult.success ? 'success' : 'warning'"
                :title="importResult.message"
                show-icon
                :closable="false"
              />
              <div v-if="importResult.errors && importResult.errors.length > 0" class="error-details">
                <h4>错误详情：</h4>
                <ul>
                  <li v-for="(error, index) in importResult.errors" :key="index">
                    第{{ error.row }}行：{{ error.message }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="closeImportDialog">取消</el-button>
        <el-button
          type="primary"
          @click="handleImport"
          :loading="importing"
          :disabled="!uploadFile"
        >
          {{ importing ? '导入中...' : '开始导入' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 批量分配老师对话框 -->
    <el-dialog
      v-model="assignTeacherDialogVisible"
      title="批量分配指导老师"
      width="500px"
      @close="closeAssignTeacherDialog"
    >
      <div class="assign-teacher-content">
        <div class="selected-students-info">
          <el-alert
            :title="`将为以下 ${selectedStudents.length} 名学生分配指导老师`"
            type="info"
            :closable="false"
            show-icon
          />
          <div class="students-list">
            <el-tag
              v-for="student in selectedStudents.slice(0, 10)"
              :key="student.id"
              size="small"
              style="margin: 4px;"
            >
              {{ student.name }} ({{ student.student_id }})
            </el-tag>
            <el-tag v-if="selectedStudents.length > 10" size="small" style="margin: 4px;">
              ... 还有 {{ selectedStudents.length - 10 }} 名学生
            </el-tag>
          </div>
        </div>

        <el-form :model="assignTeacherForm" label-width="100px" style="margin-top: 20px;">
          <el-form-item label="指导老师" required>
            <el-select
              v-model="assignTeacherForm.teacherId"
              placeholder="请选择指导老师"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="teacher in teacherList"
                :key="teacher.id"
                :label="`${teacher.first_name || teacher.username} (${teacher.username})`"
                :value="teacher.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="closeAssignTeacherDialog">取消</el-button>
        <el-button
          type="primary"
          @click="handleBatchAssignTeacher"
          :loading="batchOperating"
          :disabled="!assignTeacherForm.teacherId"
        >
          {{ batchOperating ? '分配中...' : '确认分配' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Upload, Download, Search, Edit,
  UploadFilled, User, School, Document, InfoFilled, Delete,
  Operation, ArrowDown, Check, Close, Trophy
} from '@element-plus/icons-vue'
import { studentApi } from '@/api/students'
import { schoolApi, majorApi, gradeApi, teacherApi } from '@/api/student'
import { useUserStore } from '@/stores/user'
import ThemeToggle from '@/components/ThemeToggle.vue'
import * as XLSX from 'xlsx'

// 用户store
const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const dataLoading = ref(false)
const studentList = ref<any[]>([])
const schoolList = ref<any[]>([])
const majorList = ref<any[]>([])
const gradeList = ref<any[]>([])
const teacherList = ref<any[]>([])

// 批量操作相关
const selectedStudents = ref<any[]>([])
const batchOperating = ref(false)

// 批量分配老师相关
const assignTeacherDialogVisible = ref(false)
const assignTeacherForm = reactive({
  teacherId: null
})

// 搜索表单
const searchForm = reactive({
  search: '',
  school_id: '',
  major_id: '',
  status: '',
  employment_status: '',
  advisor_id: ''
})

// 分页功能已移至服务器端，不再需要客户端过滤

// 分页
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 计算表格高度
const tableHeight = computed(() => {
  // 计算可用高度：窗口高度 - 页面头部 - 搜索区域 - 分页区域 - 边距
  return window.innerHeight - 280
})

// 学生表单
const studentDialogVisible = ref(false)
const isEdit = ref(false)
const submitting = ref(false)
const studentFormRef = ref()

const studentForm = reactive({
  id: null,
  student_id: '', // 添加学号字段
  name: '',
  password: '123456',
  gender: 'M',
  birth_date: '',
  phone: '',
  email: '',
  school: '',
  major: '',
  grade: '',
  enrollment_date: '',
  graduation_date: '',
  advisor: '',
  address: '',
  notes: ''
})

const phonePattern = /^1[3-9]\d{9}$/

const studentRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: phonePattern, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  school: [{ required: true, message: '请选择校区', trigger: 'change' }],
  major: [{ required: true, message: '请选择专业', trigger: 'change' }],
  grade: [{ required: true, message: '请选择年级', trigger: 'change' }]
}

// 导入对话框
const importDialogVisible = ref(false)
const importing = ref(false)
const uploadRef = ref()
const uploadFile = ref(null)
const importProgress = reactive({
  current: 0,
  total: 0,
  percentage: 0,
  success: 0,
  error: 0
})
const importResult = ref(null)

// API调用函数
const fetchStudentList = async () => {
  loading.value = true
  try {
    console.log('Fetching student list...')

    // 构建查询参数
    const params: any = {
      page: pagination.page,
      page_size: pagination.pageSize
    }

    // 添加搜索条件
    if (searchForm.search) {
      params.search = searchForm.search
    }
    if (searchForm.school_id) {
      params.school = searchForm.school_id
    }
    if (searchForm.major_id) {
      params.major = searchForm.major_id
    }
    if (searchForm.status) {
      params.status = searchForm.status
    }
    if (searchForm.employment_status) {
      params.employment_status = searchForm.employment_status
    }
    if (searchForm.advisor_id) {
      params.advisor = searchForm.advisor_id
    }

    console.log('API params:', params)
    const response = await studentApi.getStudentList(params)
    console.log('Student API response:', response)

    // 处理分页响应
    if (response.data && response.data.results) {
      studentList.value = response.data.results
      pagination.total = response.data.count || 0
    } else if (Array.isArray(response.data)) {
      // 兼容非分页响应
      studentList.value = response.data
      pagination.total = response.data.length
    } else {
      studentList.value = []
      pagination.total = 0
    }

    console.log('Student list loaded:', studentList.value)
    console.log('Total count:', pagination.total)
  } catch (error) {
    console.error('获取学生列表失败:', error)
    ElMessage.error('获取学生列表失败')
    studentList.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

const fetchSchoolList = async () => {
  try {
    console.log('Fetching school list...')
    const response = await schoolApi.getSchoolList()
    console.log('School API response:', response)

    // 处理分页和非分页两种情况
    if (response.data) {
      if (Array.isArray(response.data)) {
        // 非分页响应，直接使用data数组
        schoolList.value = response.data
      } else if (response.data.results && Array.isArray(response.data.results)) {
        // 分页响应，使用results数组
        schoolList.value = response.data.results
      } else {
        // 其他情况，设为空数组
        schoolList.value = []
      }
    } else {
      schoolList.value = []
    }

    console.log('School list loaded:', schoolList.value)

    // 验证数据结构
    if (schoolList.value.length > 0) {
      const firstSchool = schoolList.value[0]
      if (!firstSchool.id || !firstSchool.name) {
        console.warn('校区数据结构异常:', firstSchool)
        ElMessage.warning('校区数据格式异常，请联系管理员')
      }
    }
  } catch (error: any) {
    console.error('获取学校列表失败:', error)
    schoolList.value = []

    // 根据错误类型显示不同的提示
    if (error.response?.status === 403) {
      ElMessage.error('没有权限获取校区列表')
    } else if (error.response?.status === 401) {
      ElMessage.error('请先登录')
    } else {
      ElMessage.error('获取校区列表失败，请稍后重试')
    }
  }
}

const fetchMajorList = async () => {
  try {
    console.log('Fetching major list...')
    const response = await majorApi.getMajorList()
    console.log('Major API response:', response)

    // 处理分页和非分页两种情况
    if (response.data) {
      if (Array.isArray(response.data)) {
        majorList.value = response.data
      } else if (response.data.results && Array.isArray(response.data.results)) {
        majorList.value = response.data.results
      } else {
        majorList.value = []
      }
    } else {
      majorList.value = []
    }

    console.log('Major list loaded:', majorList.value)
  } catch (error: any) {
    console.error('获取专业列表失败:', error)
    majorList.value = []

    if (error.response?.status === 403) {
      ElMessage.error('没有权限获取专业列表')
    } else if (error.response?.status === 401) {
      ElMessage.error('请先登录')
    } else {
      ElMessage.error('获取专业列表失败，请稍后重试')
    }
  }
}

const fetchGradeList = async () => {
  try {
    console.log('Fetching grade list...')
    const response = await gradeApi.getGradeList()
    console.log('Grade API response:', response)

    // 处理分页和非分页两种情况
    if (response.data) {
      if (Array.isArray(response.data)) {
        gradeList.value = response.data
      } else if (response.data.results && Array.isArray(response.data.results)) {
        gradeList.value = response.data.results
      } else {
        gradeList.value = []
      }
    } else {
      gradeList.value = []
    }

    console.log('Grade list loaded:', gradeList.value)
  } catch (error: any) {
    console.error('获取年级列表失败:', error)
    gradeList.value = []

    if (error.response?.status === 403) {
      ElMessage.error('没有权限获取年级列表')
    } else if (error.response?.status === 401) {
      ElMessage.error('请先登录')
    } else {
      ElMessage.error('获取年级列表失败，请稍后重试')
    }
  }
}

const fetchTeacherList = async () => {
  try {
    console.log('Fetching teacher list...')
    const response = await teacherApi.getSimpleTeacherList()
    console.log('Teacher API response:', response)
    teacherList.value = response.data || []
    console.log('Teacher list loaded:', teacherList.value)
  } catch (error) {
    console.error('获取教师列表失败:', error)
    teacherList.value = []
    ElMessage.error('获取教师列表失败')
  }
}

// 事件处理函数
const handleSearch = () => {
  // 搜索时重置到第一页
  pagination.page = 1
  fetchStudentList()
}

const handleReset = () => {
  // 重置搜索表单
  searchForm.search = ''
  searchForm.school_id = ''
  searchForm.major_id = ''
  searchForm.status = ''
  searchForm.employment_status = ''
  searchForm.advisor_id = ''

  // 重置时也重置到第一页
  pagination.page = 1
  fetchStudentList()
}

const showAddDialog = async () => {
  console.log('showAddDialog called')
  console.log('userStore:', userStore)
  console.log('userStore.isAdmin:', userStore.isAdmin)

  isEdit.value = false
  resetStudentForm()

  // 检查下拉框数据是否为空，如果为空则重新获取
  const needRefresh = schoolList.value.length === 0 ||
                     majorList.value.length === 0 ||
                     gradeList.value.length === 0 ||
                     teacherList.value.length === 0

  if (needRefresh) {
    console.log('下拉框数据为空，重新获取数据...')
    dataLoading.value = true
    try {
      await Promise.all([
        schoolList.value.length === 0 ? fetchSchoolList() : Promise.resolve(),
        majorList.value.length === 0 ? fetchMajorList() : Promise.resolve(),
        gradeList.value.length === 0 ? fetchGradeList() : Promise.resolve(),
        teacherList.value.length === 0 ? fetchTeacherList() : Promise.resolve()
      ])
    } catch (error) {
      console.error('重新获取下拉框数据失败:', error)
    } finally {
      dataLoading.value = false
    }
  }

  studentDialogVisible.value = true
  console.log('studentDialogVisible:', studentDialogVisible.value)
}

const showEditDialog = (row: any) => {
  isEdit.value = true
  studentDialogVisible.value = true
  
  Object.keys(studentForm).forEach(key => {
    if (key in row) {
      studentForm[key] = row[key]
    }
  })
}

const resetStudentForm = () => {
  Object.keys(studentForm).forEach(key => {
    if (key === 'gender') {
      studentForm[key] = 'M'
    } else if (key === 'password') {
      studentForm[key] = '123456'
    } else if (key === 'id') {
      studentForm[key] = null
    } else {
      studentForm[key] = ''
    }
  })

  // 重置编辑状态
  isEdit.value = false

  if (studentFormRef.value) {
    studentFormRef.value.clearValidate()
  }
}

const handleSubmit = async () => {
  if (!studentFormRef.value) return

  try {
    await studentFormRef.value.validate()

    // 额外的数据验证
    if (!validateFormData()) {
      return
    }

    submitting.value = true

    // 准备提交数据
    const submitData: any = { ...studentForm }

    if (isEdit.value) {
      // 编辑时，移除密码字段（不需要更新密码）
      delete submitData.password

      // 确保student_id存在
      if (!submitData.student_id) {
        ElMessage.error('学号信息缺失，请重新选择学生进行编辑')
        return
      }

      console.log('更新学生数据:', submitData)
      await studentApi.updateStudent(studentForm.id!, submitData)
      ElMessage.success('更新成功')
    } else {
      // 创建时，确保密码存在
      if (!submitData.password) {
        submitData.password = '123456'
      }

      console.log('创建学生数据:', submitData)
      await studentApi.createStudent(submitData)
      ElMessage.success('创建成功')
    }

    studentDialogVisible.value = false
    fetchStudentList()
  } catch (error: any) {
    console.error('提交失败:', error)

    // 更详细的错误处理
    if (error.response && error.response.data) {
      const errorData = error.response.data
      if (typeof errorData === 'object') {
        const errorMessages = []
        for (const [field, messages] of Object.entries(errorData)) {
          if (Array.isArray(messages)) {
            errorMessages.push(`${field}: ${messages.join(', ')}`)
          } else {
            errorMessages.push(`${field}: ${messages}`)
          }
        }
        ElMessage.error(`操作失败: ${errorMessages.join('; ')}`)
      } else {
        ElMessage.error(`操作失败: ${errorData}`)
      }
    } else {
      const errorMessage = error.response?.data?.message || error.message || '提交失败'
      ElMessage.error(errorMessage)
    }
  } finally {
    submitting.value = false
  }
}

// 额外的表单数据验证
const validateFormData = () => {
  // 验证校区是否存在
  if (studentForm.school && !schoolList.value.find(s => s.id === studentForm.school)) {
    ElMessage.error('请选择有效的校区')
    return false
  }

  // 验证专业是否存在
  if (studentForm.major && !majorList.value.find(m => m.id === studentForm.major)) {
    ElMessage.error('请选择有效的专业')
    return false
  }

  // 验证年级是否存在
  if (studentForm.grade && !gradeList.value.find(g => g.id === studentForm.grade)) {
    ElMessage.error('请选择有效的年级')
    return false
  }

  // 验证指导老师是否存在（如果选择了）
  if (studentForm.advisor && !teacherList.value.find(t => t.id === studentForm.advisor)) {
    ElMessage.error('请选择有效的指导老师')
    return false
  }

  // 验证日期格式
  if (studentForm.enrollment_date && !/^\d{4}-\d{2}$/.test(studentForm.enrollment_date)) {
    ElMessage.error('入学日期格式应为YYYY-MM')
    return false
  }

  if (studentForm.graduation_date && !/^\d{4}-\d{2}$/.test(studentForm.graduation_date)) {
    ElMessage.error('毕业日期格式应为YYYY-MM')
    return false
  }

  // 验证毕业日期应晚于入学日期
  if (studentForm.enrollment_date && studentForm.graduation_date) {
    if (studentForm.graduation_date <= studentForm.enrollment_date) {
      ElMessage.error('毕业日期应晚于入学日期')
      return false
    }
  }

  return true
}

const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除学生 ${row.name} 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await studentApi.deleteStudent(row.id)
    ElMessage.success('删除成功')
    fetchStudentList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 批量操作相关函数
const handleSelectionChange = (selection: any[]) => {
  selectedStudents.value = selection
  console.log('选中的学生:', selectedStudents.value)
}

const handleBatchAction = async (command: string) => {
  if (selectedStudents.value.length === 0) {
    ElMessage.warning('请先选择要操作的学生')
    return
  }

  console.log('批量操作:', command, '选中学生数量:', selectedStudents.value.length)

  try {
    batchOperating.value = true

    switch (command) {
      case 'delete':
        await handleBatchDelete()
        break
      case 'activate':
        await handleBatchStatusChange('active', '激活')
        break
      case 'suspend':
        await handleBatchStatusChange('suspended', '停用')
        break
      case 'graduate':
        await handleBatchStatusChange('graduated', '毕业')
        break
      case 'assignTeacher':
        showAssignTeacherDialog()
        break
      case 'export':
        await handleBatchExport()
        break
      default:
        ElMessage.warning('未知的操作类型')
    }
  } catch (error) {
    console.error('批量操作失败:', error)
  } finally {
    batchOperating.value = false
  }
}

const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedStudents.value.length} 名学生吗？此操作不可恢复！`,
      '批量删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }
    )

    const deletePromises = selectedStudents.value.map(student =>
      studentApi.deleteStudent(student.id)
    )

    const results = await Promise.allSettled(deletePromises)

    const successCount = results.filter(result => result.status === 'fulfilled').length
    const failCount = results.filter(result => result.status === 'rejected').length

    if (successCount > 0) {
      ElMessage.success(`成功删除 ${successCount} 名学生${failCount > 0 ? `，${failCount} 名学生删除失败` : ''}`)
      fetchStudentList()
      selectedStudents.value = []
    } else {
      ElMessage.error('批量删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除操作失败')
    }
  }
}

const handleBatchStatusChange = async (status: string, statusName: string) => {
  try {
    await ElMessageBox.confirm(
      `确定要将选中的 ${selectedStudents.value.length} 名学生状态设置为"${statusName}"吗？`,
      `批量${statusName}确认`,
      {
        confirmButtonText: `确定${statusName}`,
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const updatePromises = selectedStudents.value.map(student =>
      studentApi.updateStudent(student.id, { status })
    )

    const results = await Promise.allSettled(updatePromises)

    const successCount = results.filter(result => result.status === 'fulfilled').length
    const failCount = results.filter(result => result.status === 'rejected').length

    if (successCount > 0) {
      ElMessage.success(`成功${statusName} ${successCount} 名学生${failCount > 0 ? `，${failCount} 名学生操作失败` : ''}`)
      fetchStudentList()
      selectedStudents.value = []
    } else {
      ElMessage.error(`批量${statusName}失败`)
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(`批量${statusName}操作失败`)
    }
  }
}

const handleBatchExport = async () => {
  try {
    // 准备导出数据
    const exportData = selectedStudents.value.map(student => ({
      '学号': student.student_id,
      '姓名': student.name,
      '性别': student.gender === 'M' ? '男' : '女',
      '手机号': student.phone || '',
      '邮箱': student.email || '',
      '年级': student.grade_info?.name || '',
      '专业': student.major_info?.name || '',
      '校区': student.school_info?.name || '',
      '指导老师': student.advisor_info?.first_name || student.advisor_info?.username || '',
      '学籍状态': getStatusText(student.status),
      '入学日期': student.enrollment_date || '',
      '毕业日期': student.graduation_date || '',
      '地址': student.address || '',
      '备注': student.notes || ''
    }))

    // 创建工作簿
    const ws = XLSX.utils.json_to_sheet(exportData)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, '学生信息')

    // 下载文件
    const fileName = `学生信息_${new Date().toISOString().slice(0, 10)}.xlsx`
    XLSX.writeFile(wb, fileName)

    ElMessage.success(`成功导出 ${selectedStudents.value.length} 名学生信息`)
    selectedStudents.value = []
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败')
  }
}

// 批量分配老师相关函数
const showAssignTeacherDialog = () => {
  assignTeacherDialogVisible.value = true
  assignTeacherForm.teacherId = null
}

const closeAssignTeacherDialog = () => {
  assignTeacherDialogVisible.value = false
  assignTeacherForm.teacherId = null
}

const handleBatchAssignTeacher = async () => {
  if (!assignTeacherForm.teacherId) {
    ElMessage.warning('请选择指导老师')
    return
  }

  try {
    batchOperating.value = true

    const updatePromises = selectedStudents.value.map(async (student) => {
      try {
        // 验证必填字段
        if (!student.student_id || !student.name || student.grade === undefined || student.grade === null) {
          console.error('学生数据不完整:', student)
          throw new Error(`学生 ${student.name || student.id} 的数据不完整`)
        }

        // 构建完整的学生数据，只包含必填字段和要更新的字段
        const updateData = {
          student_id: student.student_id,
          name: student.name,
          gender: student.gender || 'M', // 默认值
          grade: student.grade, // 这是年级ID (number)
          advisor: assignTeacherForm.teacherId
        }

        console.log('批量分配老师 - 学生数据:', student)
        console.log('批量分配老师 - 更新数据:', updateData)
        return await studentApi.updateStudent(student.id, updateData)
      } catch (error) {
        console.error(`更新学生 ${student.name} 失败:`, error)
        throw error
      }
    })

    const results = await Promise.allSettled(updatePromises)

    const successCount = results.filter(result => result.status === 'fulfilled').length
    const failCount = results.filter(result => result.status === 'rejected').length

    // 打印失败的详细信息
    const failedResults = results.filter(result => result.status === 'rejected')
    if (failedResults.length > 0) {
      console.error('批量分配老师失败的详细信息:', failedResults.map(result => result.reason))
    }

    if (successCount > 0) {
      ElMessage.success(`成功为 ${successCount} 名学生分配指导老师${failCount > 0 ? `，${failCount} 名学生分配失败` : ''}`)
      fetchStudentList()
      selectedStudents.value = []
      closeAssignTeacherDialog()
    } else {
      ElMessage.error('批量分配指导老师失败')
    }
  } catch (error: any) {
    console.error('批量分配指导老师失败:', error)

    // 更详细的错误处理
    if (error.response && error.response.data) {
      const errorData = error.response.data
      if (typeof errorData === 'object') {
        const errorMessages = []
        for (const [field, messages] of Object.entries(errorData)) {
          if (Array.isArray(messages)) {
            errorMessages.push(`${field}: ${messages.join(', ')}`)
          } else {
            errorMessages.push(`${field}: ${messages}`)
          }
        }
        ElMessage.error(`批量分配指导老师失败: ${errorMessages.join('; ')}`)
      } else {
        ElMessage.error(`批量分配指导老师失败: ${errorData}`)
      }
    } else {
      ElMessage.error('批量分配指导老师操作失败')
    }
  } finally {
    batchOperating.value = false
  }
}

const showImportDialog = () => {
  importDialogVisible.value = true
  // 重置导入状态
  uploadFile.value = null
  importProgress.current = 0
  importProgress.total = 0
  importProgress.percentage = 0
  importProgress.success = 0
  importProgress.error = 0
  importResult.value = null
}

const closeImportDialog = () => {
  importDialogVisible.value = false
  uploadFile.value = null
  importProgress.current = 0
  importProgress.total = 0
  importProgress.percentage = 0
  importProgress.success = 0
  importProgress.error = 0
  importResult.value = null
}

const handleFileChange = (file: any) => {
  uploadFile.value = file.raw
  importResult.value = null
}

const handleFileRemove = () => {
  uploadFile.value = null
  importResult.value = null
}

const removeFile = () => {
  uploadFile.value = null
  importResult.value = null
}

const formatFileSize = (size: number) => {
  if (size < 1024) return size + ' B'
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'
  return (size / (1024 * 1024)).toFixed(1) + ' MB'
}

const downloadTemplate = () => {
  // 创建模板数据
  const templateData = [
    {
      '姓名': '张三',
      '密码': '123456',
      '性别': '男',
      '出生日期': '2000-01-01',
      '手机号': '13800138000',
      '邮箱': 'zhangsan@example.com',
      '校区': '鸥鹏科技大学',
      '专业': '计算机科学与技术',
      '年级': '2024级',
      '入学日期': '2024-09',
      '毕业日期': '2028-06',
      '指导老师': 'teacher001',
      '家庭地址': '北京市朝阳区',
      '备注': '示例数据'
    }
  ]

  // 创建工作簿
  const ws = XLSX.utils.json_to_sheet(templateData)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '学生导入模板')

  // 下载文件
  XLSX.writeFile(wb, '学生导入模板.xlsx')
  ElMessage.success('模板下载成功')
}

const handleImport = async () => {
  if (!uploadFile.value) {
    ElMessage.warning('请选择要导入的文件')
    return
  }

  importing.value = true
  importResult.value = null

  // 声明progressInterval在外层作用域
  let progressInterval: any = null

  try {
    // 创建FormData
    const formData = new FormData()
    formData.append('file', uploadFile.value)

    // 模拟导入进度
    importProgress.total = 100
    importProgress.current = 0
    importProgress.success = 0
    importProgress.error = 0

    // 模拟进度更新
    progressInterval = setInterval(() => {
      if (importProgress.current < importProgress.total) {
        importProgress.current += Math.random() * 10
        if (importProgress.current > importProgress.total) {
          importProgress.current = importProgress.total
        }
        importProgress.percentage = Math.round((importProgress.current / importProgress.total) * 100)
        importProgress.success = Math.floor(importProgress.current * 0.8)
        importProgress.error = Math.floor(importProgress.current * 0.2)
      }
    }, 200)

    // 调用导入API
    const response = await studentApi.importStudents(formData)

    clearInterval(progressInterval)

    // 设置最终进度
    importProgress.current = importProgress.total
    importProgress.percentage = 100

    // 获取响应数据（处理可能的嵌套结构）
    const responseData = response.data || response
    const successCount = responseData.success_count || 0
    const errorCount = responseData.error_count || 0
    const totalCount = responseData.total_count || 0
    const errors = responseData.errors || []

    // 设置导入结果
    importResult.value = {
      success: true,
      message: `导入完成！成功导入 ${successCount} 名学生`,
      total: totalCount,
      success_count: successCount,
      error_count: errorCount,
      errors: errors
    }

    if (successCount > 0) {
      ElMessage.success(`导入成功！共导入 ${successCount} 名学生`)
      // 导入成功后刷新学生列表
      await fetchStudentList()
    }

    if (errorCount > 0) {
      ElMessage.warning(`部分数据导入失败，请查看错误详情`)
    }

  } catch (error: any) {
    if (progressInterval) {
      clearInterval(progressInterval)
    }
    console.error('导入失败:', error)

    importResult.value = {
      success: false,
      message: '导入失败：' + (error.response?.data?.message || error.message || '未知错误'),
      errors: error.response?.data?.errors || []
    }

    ElMessage.error('导入失败')
  } finally {
    importing.value = false
  }
}

// 辅助方法
const getStatusTagType = (status: string): 'success' | 'info' | 'warning' | 'danger' => {
  const typeMap: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
    'active': 'success',
    'graduated': 'info',
    'suspended': 'warning',
    'expelled': 'danger'
  }
  return typeMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'active': '在校',
    'graduated': '已毕业',
    'suspended': '休学',
    'expelled': '退学'
  }
  return textMap[status] || status
}

// 初始化数据
const initializeData = async () => {
  dataLoading.value = true
  try {
    await Promise.all([
      fetchStudentList(),
      fetchSchoolList(),
      fetchMajorList(),
      fetchGradeList(),
      fetchTeacherList()
    ])
  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error('初始化数据失败，请刷新页面重试')
  } finally {
    dataLoading.value = false
  }
}

// 生命周期
onMounted(() => {
  console.log('Component mounted')
  console.log('userStore:', userStore)
  initializeData()
})
</script>

<style scoped>
/* CSS变量定义 - 支持深色和浅色模式 */
.student-list-container {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --border-color: #e2e8f0;
  --border-color-light: #f1f5f9;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

  min-height: 100vh;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

/* 深色模式变量 - 使用统一的 #2c2f3b 主色调 */
.dark .student-list-container {
  --bg-primary: #242732;
  --bg-secondary: #2c2f3b;
  --bg-tertiary: #363a4b;
  --border-color: #4a4e5f;
  --border-color-light: #525670;
  --text-primary: #ffffff;
  --text-secondary: #e5e5e5;
  --text-muted: #b3b3b3;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* 深色模式下的表格优化 */
.dark .student-list-container {
  /* 表格斑马纹优化 - 使用更柔和的颜色 */
  :deep(.el-table__row--striped) {
    background: rgba(54, 58, 75, 0.3) !important; /* 基于 --bg-tertiary 的半透明版本 */
  }

  :deep(.el-table__row--striped:hover) {
    background: rgba(54, 58, 75, 0.6) !important; /* 悬停时稍微深一点 */
  }

  :deep(.el-table__row:hover) {
    background: rgba(54, 58, 75, 0.4) !important; /* 普通行悬停 */
  }

  /* 表格头部在深色模式下的优化 */
  :deep(.el-table th) {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-color) !important;
  }

  /* 表格单元格边框优化 */
  :deep(.el-table td) {
    border-bottom-color: rgba(74, 78, 95, 0.5) !important; /* 更柔和的边框 */
  }
}

/* 批量分配老师对话框样式 */
.assign-teacher-content {
  .selected-students-info {
    margin-bottom: 20px;

    .students-list {
      margin-top: 12px;
      max-height: 120px;
      overflow-y: auto;
      padding: 8px;
      background: var(--fill-color-lighter);
      border-radius: 6px;
      border: 1px solid var(--border-color-light);
    }
  }
}

.dark .assign-teacher-content {
  .selected-students-info {
    .students-list {
      background: var(--bg-tertiary);
      border-color: var(--border-color);
    }
  }
}

.page-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 24px 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  transition: color 0.3s ease;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 批量操作样式 */
.header-actions .el-dropdown {
  .el-button {
    transition: all 0.3s ease;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:not(:disabled):hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }
  }
}

.el-dropdown-menu {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border-color);

  .el-dropdown-menu__item {
    padding: 8px 16px;
    transition: all 0.2s ease;

    &:hover {
      background: var(--fill-color-light);
      color: var(--color-primary);
    }

    .el-icon {
      margin-right: 8px;
    }

    &.is-disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

/* 选中状态栏样式 */
.selection-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  border: 1px solid #bbdefb;
  border-radius: 8px;
  margin-bottom: 16px;
  animation: slideInDown 0.3s ease-out;
}

.dark .selection-bar {
  background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
  border-color: #3b82f6;
}

.selection-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 14px;

  .el-icon {
    font-size: 16px;
  }

  strong {
    color: var(--color-primary);
    font-weight: 600;
  }
}

.selection-actions {
  .el-button {
    border-color: var(--color-primary);
    color: var(--color-primary);

    &:hover {
      background: var(--color-primary);
      color: white;
    }
  }
}

.page-content {
  margin-top: 20px !important;
  flex: 1;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 32px 32px;
  transition: all 0.3s ease;
}

.search-section {
  margin-bottom: 24px;
  animation: slideInDown 0.6s ease-out;
}

.search-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.search-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.search-form {
  padding: 0px;
}

.search-input {
  width: 200px;
  transition: all 0.3s ease;
}

.search-input:focus-within {
  transform: scale(1.02);
}

.search-select {
  width: 160px;
  transition: all 0.3s ease;
}

.search-select:focus-within {
  transform: scale(1.02);
}

.table-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: slideInUp 0.6s ease-out;
}

.table-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.table-card:hover {
  box-shadow: var(--shadow-lg);
}

.table-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.student-table {
  width: 100%;
  font-size: 14px;
  background: transparent;
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
}

:deep(.el-table__header-wrapper) {
  border-radius: 0;
  background: var(--bg-tertiary);
}

:deep(.el-table th) {
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

:deep(.el-table th.el-table__cell) {
  background: var(--bg-tertiary) !important;
}

:deep(.el-table td) {
  border-bottom: 1px solid var(--border-color-light);
  padding: 12px 8px;
  background: transparent;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

:deep(.el-table__row) {
  background: transparent;
  transition: all 0.3s ease;
}

:deep(.el-table__row:hover) {
  background-color: var(--bg-tertiary) !important;
  transform: scale(1.01);
  box-shadow: var(--shadow-sm);
}

:deep(.el-table__row--striped) {
  background: var(--fill-color-lighter) !important;
}

:deep(.el-table__row--striped:hover) {
  background: var(--bg-tertiary) !important;
}

/* 按钮样式优化 */
:deep(.el-button--small) {
  padding: 8px 16px;
  font-size: 12px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

:deep(.el-button--small:hover) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

:deep(.el-button--primary.is-link) {
  color: #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.2);
}

:deep(.el-button--danger.is-link) {
  color: #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* 标签样式优化 */
:deep(.el-tag--small) {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  border: none;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

:deep(.el-tag--primary) {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
}

:deep(.el-tag--success) {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

:deep(.el-tag--warning) {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

:deep(.el-tag--danger) {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

:deep(.el-tag--info) {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

/* 分页样式优化 */
.pagination-wrapper {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color-light);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

:deep(.el-pagination) {
  font-weight: 500;
  --el-pagination-bg-color: var(--bg-secondary);
  --el-pagination-text-color: var(--text-primary);
  --el-pagination-border-radius: 8px;
}

:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

:deep(.el-pagination .btn-next:hover),
:deep(.el-pagination .btn-prev:hover) {
  background: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

:deep(.el-pagination .el-pager li) {
  border-radius: 8px;
  margin: 0 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

:deep(.el-pagination .el-pager li:hover) {
  background: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* 对话框样式优化 */
.dialog-footer {
  text-align: right;
}

:deep(.el-dialog) {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}

:deep(.el-dialog__header) {
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  padding: 20px 24px;
}

:deep(.el-dialog__title) {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 18px;
}

:deep(.el-dialog__body) {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 24px;
}

:deep(.el-dialog__footer) {
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  padding: 16px 24px;
}

/* 动画效果 */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 导入提示样式 */
.import-tips {
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 197, 253, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.import-result {
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease-out;
}

.import-result.success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--text-primary);
}

.import-result.error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--text-primary);
}

.error-list {
  margin-top: 12px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  backdrop-filter: blur(8px);
}

.error-item {
  margin-bottom: 8px;
  font-size: 13px;
  color: #ef4444;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.error-item:last-child {
  margin-bottom: 0;
}

.error-item:hover {
  background: rgba(239, 68, 68, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

/* 响应式设计优化 */
@media (max-width: 1200px) {
  .page-content {
    padding: 20px 24px 24px;
  }

  .header-content {
    padding: 0 24px;
  }

  .page-title {
    font-size: 24px;
  }

  .search-input {
    width: 180px;
  }

  .search-select {
    width: 140px;
  }
}

@media (max-width: 768px) {
  .student-list-container {
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  }

  .page-header {
    padding: 16px 20px;
  }

  .page-content {
    padding: 16px 20px 20px;
  }

  .header-content {
    padding: 0;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-actions .el-button {
    flex: 1;
    min-width: 120px;
  }

  .page-title {
    font-size: 22px;
  }

  .search-card {
    border-radius: 12px;
  }

  .table-card {
    border-radius: 12px;
  }

  .search-form {
    padding: 0px;
  }

  .search-input,
  .search-select {
    width: 100%;
    min-width: 200px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: block;
    margin-bottom: 16px;
    width: 100%;
  }

  :deep(.el-form--inline .el-form-item:last-child) {
    margin-bottom: 0;
  }

  :deep(.el-form-item__content) {
    width: 100%;
  }

  :deep(.el-table) {
    font-size: 13px;
  }

  :deep(.el-table td) {
    padding: 10px 6px;
  }

  :deep(.el-table th) {
    padding: 10px 6px;
    font-size: 12px;
  }

  :deep(.el-button--small) {
    padding: 6px 12px;
    font-size: 11px;
  }

  :deep(.el-tag--small) {
    font-size: 10px;
    padding: 2px 6px;
  }

  .pagination-wrapper {
    padding: 16px 20px;
  }

  :deep(.el-pagination) {
    justify-content: center;
  }

  :deep(.el-pagination .el-pagination__sizes),
  :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }
}

/* 卡片样式优化 */
.el-card :deep() .el-card__body {
  margin-top: 10px;
  padding: 20px !important;
  background: var(--bg-secondary);
  transition: all 0.3s ease;
}

/* 小屏幕设备优化 */
@media (max-width: 480px) {
  .page-header {
    padding: 12px 16px;
  }

  .page-content {
    padding: 12px 16px 16px;
  }

  .page-title {
    font-size: 20px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .header-actions .el-button {
    width: 100%;
    justify-content: center;
  }

  .search-card,
  .table-card {
    border-radius: 8px;
    margin-bottom: 12px;
  }

  .el-card :deep() .el-card__body {
    padding: 16px !important;
  }

  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-table td),
  :deep(.el-table th) {
    padding: 8px 4px;
  }

  :deep(.el-button--small) {
    padding: 4px 8px;
    font-size: 10px;
  }

  :deep(.el-tag--small) {
    font-size: 9px;
    padding: 1px 4px;
  }

  .pagination-wrapper {
    padding: 12px 16px;
  }

  :deep(.el-pagination .el-pagination__total),
  :deep(.el-pagination .el-pagination__sizes),
  :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }

  :deep(.el-pagination .btn-next),
  :deep(.el-pagination .btn-prev),
  :deep(.el-pagination .el-pager li) {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
  }

  /* 对话框移动端优化 */
  :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  :deep(.el-dialog__body) {
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
  }

  :deep(.el-form-item__label) {
    font-size: 13px;
  }

  :deep(.el-input__inner),
  :deep(.el-select .el-input__inner),
  :deep(.el-textarea__inner) {
    font-size: 14px;
  }
}

/* 学生对话框样式优化 */
.student-dialog {
  :deep(.el-dialog) {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-bottom: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
    padding: 20px 24px;
  }

  :deep(.el-dialog__title) {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 18px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .form-section {
    margin-bottom: 32px;
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    animation: fadeIn 0.5s ease-out;
  }

  .form-section:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
    position: relative;
  }

  .section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 1px;
  }

  .section-title .el-icon {
    color: #3b82f6;
    font-size: 20px;
    padding: 8px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .section-title:hover .el-icon {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(1.1);
  }

  :deep(.el-form-item) {
    margin-bottom: 20px;
  }

  :deep(.el-form-item__label) {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
  }

  :deep(.el-input),
  :deep(.el-select),
  :deep(.el-date-picker),
  :deep(.el-textarea) {
    --el-input-bg-color: var(--bg-secondary);
    --el-input-border-color: var(--border-color);
    --el-input-text-color: var(--text-primary);
    --el-input-placeholder-color: var(--text-muted);
  }

  :deep(.el-input__wrapper) {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  :deep(.el-input__wrapper:hover) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }

  :deep(.el-input__wrapper.is-focus) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }

  :deep(.el-radio-group) {
    display: flex;
    gap: 16px;
  }

  :deep(.el-radio) {
    --el-radio-text-color: var(--text-primary);
    margin-right: 0;
  }

  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #3b82f6;
    border-color: #3b82f6;
  }
}

/* 导入对话框样式优化 */
.import-dialog {
  :deep(.el-dialog) {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-bottom: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
    padding: 20px 24px;
  }

  :deep(.el-dialog__title) {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 18px;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .import-content {
    display: flex;
    gap: 32px;
    min-height: 500px;
    animation: fadeIn 0.6s ease-out;
  }

  .import-left {
    flex: 1;
    padding-right: 24px;
    border-right: 1px solid var(--border-color);

    h3 {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 20px 0;
      padding: 12px 16px;
      background: var(--bg-tertiary);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

    h3:hover {
      background: var(--bg-primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    h3 .el-icon {
      color: #f59e0b;
      font-size: 20px;
      padding: 6px;
      background: rgba(245, 158, 11, 0.1);
      border-radius: 6px;
    }

    .template-section {
      margin-bottom: 32px;
      padding: 20px;
      background: var(--bg-tertiary);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

    .template-section:hover {
      box-shadow: var(--shadow-sm);
      transform: translateY(-2px);
    }

    .template-actions {
      margin-bottom: 16px;
    }

    .template-guide {
      .guide-content {
        h4 {
          font-size: 14px;
          font-weight: 600;
          color: var(--text-primary);
          margin: 20px 0 12px 0;
          padding: 8px 12px;
          background: rgba(59, 130, 246, 0.1);
          border-radius: 8px;
          border-left: 3px solid #3b82f6;
        }

        .field-list, .notice-list {
          margin: 0;
          padding-left: 20px;
          background: var(--bg-secondary);
          border-radius: 8px;
          padding: 16px 20px;
          border: 1px solid var(--border-color);

          li {
            margin-bottom: 8px;
            font-size: 13px;
            line-height: 1.6;
            color: var(--text-secondary);
            transition: all 0.3s ease;
            padding: 4px 0;
            border-radius: 4px;

            strong {
              color: var(--text-primary);
              font-weight: 600;
            }
          }

          li:hover {
            background: rgba(59, 130, 246, 0.05);
            padding-left: 8px;
          }
        }

        .notice-list {
          background: rgba(245, 158, 11, 0.05);
          border-color: rgba(245, 158, 11, 0.2);
        }

        .notice-list li {
          color: #d97706;
        }

        .notice-list li:hover {
          background: rgba(245, 158, 11, 0.1);
        }
      }
    }
  }

  .import-right {
    flex: 1;

    h3 {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 20px 0;
      padding: 12px 16px;
      background: var(--bg-tertiary);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

    h3:hover {
      background: var(--bg-primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    h3 .el-icon {
      color: #10b981;
      font-size: 20px;
      padding: 6px;
      background: rgba(16, 185, 129, 0.1);
      border-radius: 6px;
    }

    .upload-section {
      .upload-area {
        margin-bottom: 20px;
      }

      :deep(.el-upload-dragger) {
        background: var(--bg-tertiary);
        border: 2px dashed var(--border-color);
        border-radius: 12px;
        transition: all 0.3s ease;
      }

      :deep(.el-upload-dragger:hover) {
        border-color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
        transform: scale(1.02);
      }

      :deep(.el-upload__text) {
        color: var(--text-primary);
        font-size: 14px;
      }

      :deep(.el-upload__tip) {
        color: var(--text-secondary);
        font-size: 12px;
      }

      .file-info {
        margin-bottom: 20px;

        .file-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 16px;
          background: var(--bg-tertiary);
          border: 1px solid var(--border-color);
          border-radius: 12px;
          transition: all 0.3s ease;
          animation: slideInUp 0.3s ease-out;
        }

        .file-item:hover {
          box-shadow: var(--shadow-sm);
          transform: translateY(-2px);
        }

        .file-item .el-icon {
          color: #3b82f6;
          font-size: 18px;
          padding: 8px;
          background: rgba(59, 130, 246, 0.1);
          border-radius: 8px;
        }

        .file-name {
          flex: 1;
          font-size: 14px;
          color: var(--text-primary);
          font-weight: 500;
        }

        .file-size {
          font-size: 12px;
          color: var(--text-secondary);
          background: var(--bg-secondary);
          padding: 4px 8px;
          border-radius: 6px;
        }
      }

      .import-progress {
        margin-bottom: 20px;
        padding: 20px;
        background: var(--bg-tertiary);
        border-radius: 12px;
        border: 1px solid var(--border-color);
        animation: pulse 2s infinite;

        .progress-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          font-size: 14px;
          color: var(--text-primary);
          font-weight: 500;
        }

        .progress-detail {
          display: flex;
          justify-content: space-between;
          margin-top: 12px;
          font-size: 12px;
          font-weight: 500;

          .success-count {
            color: #10b981;
            background: rgba(16, 185, 129, 0.1);
            padding: 4px 8px;
            border-radius: 6px;
          }

          .error-count {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.1);
            padding: 4px 8px;
            border-radius: 6px;
          }
        }
      }

      .import-result {
        padding: 20px;
        background: var(--bg-tertiary);
        border-radius: 12px;
        border: 1px solid var(--border-color);
        animation: fadeIn 0.5s ease-out;

        .error-details {
          margin-top: 16px;

          h4 {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 12px 0;
            padding: 8px 12px;
            background: rgba(239, 68, 68, 0.1);
            border-radius: 8px;
            border-left: 3px solid #ef4444;
          }

          ul {
            margin: 0;
            padding-left: 20px;
            max-height: 200px;
            overflow-y: auto;
            background: var(--bg-secondary);
            border-radius: 8px;
            padding: 12px 20px;
            border: 1px solid var(--border-color);

            li {
              margin-bottom: 6px;
              font-size: 12px;
              color: #ef4444;
              line-height: 1.5;
              padding: 2px 0;
              transition: all 0.3s ease;
            }

            li:hover {
              background: rgba(239, 68, 68, 0.05);
              padding-left: 8px;
              border-radius: 4px;
            }
          }
        }
      }
    }
  }

  /* 移动端导入对话框优化 */
  @media (max-width: 768px) {
    .import-content {
      flex-direction: column;
      gap: 20px;
    }

    .import-left {
      padding-right: 0;
      border-right: none;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 20px;
    }

    .import-right {
      padding-top: 0;
    }
  }
}

.el-table--default :deep() .cell{
  padding: 0;
}
</style>
